<template xmlns="http://www.w3.org/1999/html">
  <el-row class="warp">
    <el-col :span="24" class="warp-breadcrum">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }"><b>征信请求</b></el-breadcrumb-item>
        <el-breadcrumb-item>征信详情页</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>

    <el-col :span="24" class="warp-main">
      <!--工具条-->
      <el-col :span="24" class="toolbar" style="margin-bottom: 20px;">
          <el-button @click="showEditDialog">贷款申请</el-button>
          <span style="margin-left: 90px">征信银行:xxxxx</span>
          <span style="margin-left: 90px">征信员:xxxx</span>
      </el-col>

      <el-col style="margin-top: 20px">

        <div style="float:left;width: 6px;height: 20px; background:#58B7FF;margin-right: 9px">
        </div>
        <span>购车人</span><br/><br/>
        <span style="margin-right: 100px">姓名：</span>
        <span>身份证号码：</span>
        <div style="background-color: #EFF2F7;margin:10px 0 10px 0;padding: 5px 0px 5px 5px">
          征信结果：<span v-show="isShow">adsdaewda.....</span>
          <span v-show="!isShow">adsdaewda  adedefrrefre</span>
          <el-button type="text" @click="isExpendAll" v-text="btnText"></el-button >
        </div>
        <el-col :span="6">
          <el-card :body-style="{ padding: '0px' }">
            <img src="/assets/images/sunrise.png" class="image">
            <div style="padding: 14px;">
              <span>身份证正面</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card :body-style="{ padding: '0px' }">
            <img src="/assets/images/sunrise.png" class="image">
            <div style="padding: 14px;">
              <span>身份证背面</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card :body-style="{ padding: '0px' }">
            <img src="/assets/images/sunrise.png" class="image">
            <div style="padding: 14px;">
              <span>授权书</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card :body-style="{ padding: '0px' }">
            <img src="/assets/images/sunrise.png" class="image">
            <div style="padding: 14px;">
              <span>授权书面签</span>
            </div>
          </el-card>
        </el-col>
      </el-col>

      <el-col style="margin-top: 20px">

        <div style="float:left;width: 6px;height: 20px; background:#58B7FF;margin-right: 9px">
        </div>
        <span>共同购车人</span><br/><br/>
        <span style="margin-right: 100px">姓名：</span>
        <span>身份证号码：</span>
        <div style="background-color: #EFF2F7;margin:10px 0 10px 0;padding: 5px 0px 5px 5px">
          征信结果：<span v-show="isShow">adsdaewda.....</span>
          <span v-show="!isShow">adsdaewda  adedefrrefre</span>
          <el-button type="text" @click="isExpendAll" v-text="btnText"></el-button >
        </div>
        <el-col :span="6">
          <el-card :body-style="{ padding: '0px' }">
            <img src="/assets/images/sunrise.png" class="image">
            <div style="padding: 14px;">
              <span>身份证正面</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card :body-style="{ padding: '0px' }">
            <img src="/assets/images/sunrise.png" class="image">
            <div style="padding: 14px;">
              <span>身份证背面</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card :body-style="{ padding: '0px' }">
            <img src="/assets/images/sunrise.png" class="image">
            <div style="padding: 14px;">
              <span>授权书</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card :body-style="{ padding: '0px' }">
            <img src="/assets/images/sunrise.png" class="image">
            <div style="padding: 14px;">
              <span>授权书面签</span>
            </div>
          </el-card>
        </el-col>
      </el-col>

      <el-col style="margin-top: 20px">

        <div style="float:left;width: 6px;height: 20px; background:#58B7FF;margin-right: 9px">
        </div>
        <span>担保人</span><br/><br/>
        <span style="margin-right: 100px;">姓名：</span>
        <span>身份证号码：</span>
        <div style="background-color: #EFF2F7;margin:10px 0 10px 0;padding: 5px 0px 5px 5px">
          征信结果：<span v-show="isShow">adsdaewda.....</span>
          <span v-show="!isShow">adsdaewda  adedefrrefre</span>
          <el-button type="text" @click="isExpendAll" v-text="btnText"></el-button >
        </div>

        <el-col :span="6">
          <el-card :body-style="{ padding: '0px' }">
            <img src="/assets/images/sunrise.png" class="image">
            <div style="padding: 14px;">
              <span>身份证正面</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card :body-style="{ padding: '0px' }">
            <img src="/assets/images/sunrise.png" class="image">
            <div style="padding: 14px;">
              <span>身份证背面</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card :body-style="{ padding: '0px' }">
            <img src="/assets/images/sunrise.png" class="image">
            <div style="padding: 14px;">
              <span>授权书</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card :body-style="{ padding: '0px' }">
            <img src="/assets/images/sunrise.png" class="image">
            <div style="padding: 14px;">
              <span>授权书面签</span>
            </div>
          </el-card>
        </el-col>

      </el-col>
    </el-col>
  </el-row>
</template>

<script>
  import ElFormItem from "../../node_modules/element-ui/packages/form/src/form-item.vue";
  import ElCol from "element-ui/packages/col/src/col";
  import ElButton from "../../node_modules/element-ui/packages/button/src/button.vue";

  export default {
    components: {
      ElButton,
      ElCol,
      ElFormItem},
    data() {
      return {
        isShow:true,
        dialogImageUrl: '',
        dialogVisible: false,
        btnText:"展开全部",
      }
    },
    methods: {
      //性别显示转换
      formatSex: function (row, column) {
        return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
      },

      showEditDialog:function () {
        this.$router.push({path:'/user/dkRequest'})
      },

      isExpendAll: function () {
        this.isShow = !this.isShow
        if (this.isShow) {
          this.btnText = "展开全部"
        } else {
          this.btnText = "点击关闭"
        }
      },
    }
  }
</script>

<style scoped>

</style>
